<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>详情页面</title>
    <link rel="stylesheet" href="/app/admin/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/app/admin/component/jsoneditor/css/jsoneditor.css" />
    <link rel="stylesheet" href="/app/admin/admin/css/reset.css" />
    <style>
        .detail-container {
            padding: 20px;
            background-color: #fff;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .detail-item {
            margin-bottom: 15px;
        }
        .detail-label {
            font-weight: bold;
            margin-bottom: 5px;
            display: inline-block;
            width: 150px;
        }
        .detail-value {
            display: inline-block;
        }
        .detail-image img {
            max-width: 100%;
            height: auto;
            cursor: pointer;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
            transition: transform 0.2s;
        }
        .detail-image img:hover {
            transform: scale(1.05);
        }
        /* 弹出层样式 */
        .popup-image {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .popup-image img {
            max-width: 90%;
            max-height: 90%;
            border: none;
            box-shadow: none;
        }
    </style>

</head>
<body>

<div class="mainBox">
    <div class="main-container mr-5">
        <div class="detail-container">
            <div class="detail-item">
                <div class="detail-label">订单编号</div>
                <div class="detail-value" id="sn"></div>
            </div>

            <div class="detail-item">
                <div class="detail-label">联系人电话</div>
                <div class="detail-value" id="mobile"></div>
            </div>

            <div class="detail-item">
                <div class="detail-label">抽成</div>
                <div class="detail-value" id="rake_price"></div>
            </div>

            <div class="detail-item">
                <div class="detail-label">计入奖励的总金额</div>
                <div class="detail-value" id="reward_total_price"></div>
            </div>

            <div class="detail-item">
                <div class="detail-label">下单时间</div>
                <div class="detail-value" id="order_create_time"></div>
            </div>

            <div class="detail-item">
                <div class="detail-label">奖励时间</div>
                <div class="detail-value" id="reward_create_time"></div>
            </div>


            <div class="detail-item">
                <div class="detail-label">支付单号</div>
                <div class="detail-value" id="pay_no"></div>
            </div>

            <div class="detail-item">
                <div class="detail-label">下单人身份证正面图片</div>
                <div class="detail-value detail-image" id="identity_card_img"></div>
            </div>

            <div class="detail-item">
                <div class="detail-label">下单人身份证反面图片</div>
                <div class="detail-value detail-image" id="identity_card_back_img"></div>
            </div>


            <div class="detail-item">
                <div class="detail-label">驾驶证</div>
                <div class="detail-value detail-image" id="driving_license"></div>
            </div>


        </div>
    </div>
</div>

<script src="/app/admin/component/layui/layui.js?v=2.8.12"></script>
<script src="/app/admin/component/pear/pear.js"></script>
<script src="/app/admin/component/jsoneditor/jsoneditor.js"></script>
<script src="/app/admin/admin/js/permission.js"></script>

<script>
    // 相关接口
    const PRIMARY_KEY = "id";
    const SELECT_API = "/app/admin/order/select" + location.search;

    // 获取数据库记录
    layui.use(["form", "util", "popup"], function () {
        let $ = layui.$;
        $.ajax({
            url: SELECT_API,
            dataType: "json",
            success: function (res) {

                // 给表单初始化数据
                layui.each(res.data[0], function (key, value) {
                    let obj = $('#' + key);
                    if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
                    if (key === "identity_card_img" || key === "identity_card_back_img" || key === "driving_license") {
                        obj.html('<img src="' + value + '" alt="' + key + '">');
                    } else {
                        obj.text(value);
                    }
                });

                // 字段 下单时间 order_create_time
                layui.use(["laydate"], function() {
                    layui.laydate.render({
                        elem: "#order_create_time",
                        type: "datetime",
                        isInitValue: true
                    });
                })

                // 字段 奖励时间 reward_create_time
                layui.use(["laydate"], function() {
                    layui.laydate.render({
                        elem: "#reward_create_time",
                        type: "datetime",
                        isInitValue: true
                    });
                })

                // 点击图片时弹出大图片
                $('.detail-image img').on('click', function() {
                    let src = $(this).attr('src');
                    let img = $('<img>').attr('src', src);
                    let popup = $('<div>').addClass('popup-image').append(img);
                    $('body').append(popup);
                    popup.on('click', function() {
                        $(this).remove();
                    });
                });

                // ajax返回失败
                if (res.code) {
                    layui.popup.failure(res.msg);
                }

            }
        });
    });

</script>

</body>
</html>
